import React, {PureComponent} from 'react'
import {
    Card,
    Button,
    Table,
    Modal,
    message
} from 'antd'
import {PAGE_SIZE} from "../../utils/constants"
import {reqRoles, reqAddRole, reqUpdateRole} from '../../api'
import AddForm from './add-form'
import AuthForm from './auth-form'
import memoryUtils from "../../utils/memoryUtils"
import {formateDate} from '../../utils/dateUtils'


/*
角色路由
*/

export default class Role extends PureComponent{
    state = {
        roles: [], // 所有角色的列表
        role: {}, // 选中的 role
        isShowAdd: false, // 是否显示添加界面
        isShowAuth: false, // 是否显示设置权限界面
    }
    constructor(props) {
        super(props);
        this.auth = React.createRef()
        // console.log( React.createRef())
    }

    initColumn=()=>{
        this.columns = [
            {
                title: ' 角色名称',
                dataIndex: 'name'
            },
            {
                title: ' 创建时间',
                dataIndex: 'create_time',
                render: (create_time) => formateDate(create_time)
            },
            {
                title: ' 授权时间',
                dataIndex: 'auth_time',
                render: formateDate
            },
            {
                title: ' 授权人',
                dataIndex: 'auth_name'
            },
        ]
    }

    getRoles=async ()=>{
        const result = await reqRoles()
        if (result.status===0){
            const roles = result.data;
            this.setState({
                roles
            })
        }
    }

    onRow=(role)=>{
        return{
            onClick:(event)=>{
                // alert('点击行')
                this.setState({
                    role
                })
            }
        }
    }

    addRole=()=>{
        // 进行表单验证 , 只能通过了才向下处理
        this.form.validateFields(async (error, values)=>{
            if(!error){
                // 隐藏确认框
                this.setState({
                    isShowAdd: false
                })
                // 收集输入数据
                const {roleName} = values
                console.log(roleName)
                //重置表单
                this.form.resetFields()
                // 请求添加
                const result = await reqAddRole(roleName)
                // 根据结果提示 / 更新列表显示
                if(result.status===0){
                    message.success(' 添加角色成功')
                    // 新产生的角色
                    const role = result.data
                    // 更新 roles 状态 : 基于原本状态数据更新
                    this.setState(state=>({
                        role:[...state.roles, role]
                    }))
                }else {
                    message.success(' 添加角色失败')
                }
            }
        })
    }

    updateRole=async ()=>{
        // 隐藏确认框
        this.setState({
            isShowAuth: false
        })
        const role = this.state.role
        // 得到最新的 menus
        const menus = this.auth.current.getMenus()
        role.menus = menus
        role.auth_time = Date.now()
        role.auth_name = memoryUtils.user.username
        // 请求更新
        const result = await reqUpdateRole(role)
        if(result.status===0){
            message.success(' 设置角色权限成功')
            this.setState({
                roles: [...this.state.roles]
            })
        }else{
            message.success(' 添加更新失败')
        }
    }
    componentWillMount(){
        this.initColumn()
    }
    componentDidMount(){
        this.getRoles()
    }

    render() {
        // console.log('Role render()')
        const {roles, role, isShowAdd, isShowAuth} = this.state
        const title=(
            <span>
                <Button
                    type='primary'
                    onClick={() => this.setState({isShowAdd: true})}
                >
                    创建角色
                </Button> &nbsp;&nbsp;
                <Button
                    type='primary'
                    disabled={!role._id} onClick={() =>this.setState({isShowAuth: true})}
                >
                    设置角色权限
                </Button>
            </span>
        );
        return(
            <Card title={title}>
                <Table
                    bordered
                    rowKey='_id'
                    dataSource={roles}
                    columns={this.columns}
                    pagination={{defaultPageSize: PAGE_SIZE}}
                    rowSelection={{type: 'radio', selectedRowKeys: [role._id]}}
                    onRow={this.onRow}
                />
                <Modal
                    title=" 添加角色"
                    visible={isShowAdd}
                    onOk={this.addRole}
                    onCancel={() => {
                        this.setState({isShowAdd: false})
                        this.form.resetFields()
                    }}
                >
                    <AddForm
                        setForm={(form) => this.form = form}
                    />
                </Modal>
                <Modal
                    title=" 设置角色权限"
                    visible={isShowAuth}
                    onOk={this.updateRole}
                    onCancel={() => {
                        this.setState({isShowAuth: false})
                    }}
                >
                    <AuthForm ref={this.auth} role={role}/>
                </Modal>
            </Card>
        )
    }

}
